CloudFront+S3に独自ドメインと証明書を添えて

S3バケットに保存した画像をCloudFront経由で独自ドメインにACMで発行した証明書つけて配信したい。というのを滅多にやらないので忘れてもいいようにS3バケット作るところからまとめました。

• CloudFront + S3でオブジェクトを公開
• Route53で管理しているドメイン名を使ってCloudFrontにアクセス
• CloudFrontにAWS Certificate Managerで発行した証明をつけてHTTPSアクセス

前提としてRoute53で管理しているドメイン名がある状態からはじめます。

S３バケット作成

バケット名はohmura-public-bucketとしました。

S3バケット直アクセスからオブジェクト参照のテストをするためパブリックアクセスをすべてブロックのチェックを外します。S3への直アクセスのテストをしない場合はチェックを外さず、以降のバケットポリシーも未編集で素のバケット作成のみでOKです。

デフォルト暗号化は有効にしました。

バケットポリシーを編集します。

Resourceの箇所は作成したバケット名に置き換えてください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::ohmura-public-bucket/*"
            ]
        }
    ]
}

パブリックにアクセス可能と表示されました。

画像をアップロードします。画像は網走市のホームページより

携帯待受画像｜網走市の紹介｜網走市

アップロードした画像の オブジェクトURL を確認します。

オブジェクトURLをブラウザで開きます。画像を公開できました。

今の状態

URLの種類	アクセス状況
S3のURL	OK
CloudFrontの素のURL	NG
独自ドメイン名	NG

CloudFrontで公開

WEBディストリビューションを作成します。

Origin Domain NameはS3バケットを入力します。

S3バケットへ直接アクセスは禁止する設定を入れて作成します。

In Progressの表示がDeployedになるまで待ちます。

Deployedになった後はS3バケットのオブジェクトURLへアクセスしても画像は見れなくなりました。期待通りの動作です。

CloudFrontのDomain Name + / + 画像のパス のURLにアクセスします。つまり下記になります。

https://d36x63asr6ij3y.cloudfront.net/notoromisaki240.jpg

画像は見えるのですがS3バケットのURLへリダイレクトされてしまいます。

S3バケットのURLへリダイレクトされる理由はこちら

CloudFrontのURLで期待どおり画像を表示できるようになります。

今の状態

URLの種類	アクセス状況
S3のURL	NG
CloudFrontの素のURL	OK
独自ドメイン名	NG

独自ドメインに証明書つけて公開

証明書作成

CloudFrontで証明書を利用するためバージニア北部リージョンで発行します。サブドメインをつけてimage.[domainname]としています。

Route53で管理しているドメインなのでCNAMEレコードをワンクリックで作成してもらいます。

少し待つと発行済みになりました。

CloudFront設定変更

CloudFrontで作成したDistributionの設定を変更します。Alternate Domain Namesにドメイン名を入力します。SSL証明書はACMで作成した証明書選択します。

Route53にエイリアス登録

image.[domainname]で証明書を作成したので同じくimageのレコード名のエイリアスとしてCloudFrontのURLを指定します。

独自ドメインにHTTPSアクセス可能になりました。パスは独自ドメイン + / + 画像のパスです。

https://image.[domainname]/notoromisaki240.jpg

今の状態

URLの種類	アクセス状況
S3のURL	NG
CloudFrontの素のURL	OK
独自ドメイン名	OK

おわりに

独自ドメイン＋証明書付きで頭からまとまっているものがぱっと見当たらなかったので作成したついでにまとめました。どなたかのお役にたてば幸いです。

参考

【初心者向け】CloudFront経由でS3のファイルを見る【やってみた】 | Developers.IO
CloudFront 経由で S3 のファイルにアクセスする - Qiita